<style>
.{{$t|escape:'html'}}_main {
  border-left: 15px solid #eaf2f5;
  border-right: 15px solid #eaf2f5;
  width: 1250px;
}
.{{$t|escape:'html'}}_subtitle {
  background-color: #e5f1f5;
  padding: 7px 0 7px 10px;
  font-family: Arial Black;
}
.{{$t|escape:'html'}}_emphasis {
  background-color: #d6e3e8;
  font-weight: bold;
  font-family: Trebuchet MS;
}
.{{$t|escape:'html'}}_eg {
  font-family: Trebuchet MS;
}
table.{{$t|escape:'html'}}_table td {
}
table.{{$t|escape:'html'}}_table td.title {
  font-weight: bold;
  text-align: right;
  padding: 2px 10px 2px 20px;
  margin-right: 20px;
  background-color: #d6e3e8;
  font-family: Trebuchet MS;
  width: 150px;
  height: 30px;
}
.{{$t|escape:'html'}}_select {
  width: 195px;
  height: 26px;
  margin-left: 4px; 
}
.{{$t|escape:'html'}}_text {
  width: 190px;
  height: 20px;
  margin-left: 4px; 
}
.{{$t|escape:'html'}}_button {
  margin-top: 10px; 
  margin-left: 3px; 
}
.{{$t|escape:'html'}}_textarea {
  width: 380px;
  height: 160px;
  margin-left: 4px; 
}
.{{$t|escape:'html'}}_status_text {
  font-weight: bold;
  padding-bottom: 5px;
  font-family: Arial;
}
.{{$t|escape:'html'}}_image_button {
  cursor: pointer;
}
table.{{$t|escape:'html'}}_listde {
  width: 100%;
  border-left: 1px solid #c8cddb;
  border-top: 1px solid #c8cddb;
}
table.{{$t|escape:'html'}}_listde td {
  padding-left: 10px;
  height: 35px;
  border-right: 1px solid #c8cddb;
  border-bottom: 1px solid #c8cddb;
  background-color: c8cddb;
  color: #ffffff;
  font-weight: bold;
}
table.{{$t|escape:'html'}}_listdrop {
  width: 100%;
  border: 0;
}
table.{{$t|escape:'html'}}_listdrop td {
  border: 0;
}
table.{{$t|escape:'html'}}_listdrop td.title {
  padding: 5px 10px 5px 20px;
  height: 35px;
  background-color: #dde1eb;
  font-weight: bold;
  text-align: right;
  width: 100px;
  color: #7b7b7b;
  font-size: 11px;
}
table.{{$t|escape:'html'}}_list {
  width: 100%;
  border-left: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
  margin-bottom: 1px;
}
table.{{$t|escape:'html'}}_list th {
  text-align: left;
  height: 30px;
  background-color: #99b0ea;
  padding: 5px 0 5px 10px; 
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  font-size: 12px;
}
table.{{$t|escape:'html'}}_list tr.drop td {
  padding-left: 0;
  border-right: 0;
  border-bottom: 0;
}
table.{{$t|escape:'html'}}_list tr.hi td {
  padding-left: 10px;
  height: 35px;
  background-color: #ff8000;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
table.{{$t|escape:'html'}}_list tr.rowodd td {
  padding-left: 10px;
  height: 35px;
  background-color: #eeeeee;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
table.{{$t|escape:'html'}}_list tr.roweven td {
  padding-left: 10px;
  height: 35px;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
table.{{$t|escape:'html'}}_list tr.rowodd:hover td {
  background-color: #f4f3b2;
}
table.{{$t|escape:'html'}}_list tr.roweven:hover td {
  background-color: #f4f3b2;
}
table.{{$t|escape:'html'}}_option td {
  background-color: #dde1eb;
}
table.{{$t|escape:'html'}}_optionde td.title {
  padding: 0 5px 0 0;
  font-weight: bold;
  text-align: right;
  color: #7b7b7b;
  font-size: 11px;
  height: 25px;
}
table.{{$t|escape:'html'}}_optionde input {
  width: 100px;
}
</style>

<div class="{{$t|escape:'html'}}_main">
  <div>
    <div class="{{$t|escape:'html'}}_subtitle" style="text-align: center;background-color: #eaf2f5;">
      <span class="image_button" style="width: 100px;" onclick="save_payment();">
        <table>
          <tr>
            <td><img src="image/btn/save24.png"></img></td>
            <td>{{t escape='html'}}Save{{/t}}</td>
          </tr>
        </table>
      </span>
      <span class="image_button" style="width: 100px;" onclick="history.back();">
        <table>
          <tr>
            <td><img src="image/btn/cancel24.png"></img></td>
            <td>{{t escape='html'}}Cancel{{/t}}</td>
          </tr>
        </table>
      </span>
    </div>
  <div>
  <div>
    <div class="{{$t|escape:'html'}}_subtitle">{{t escape='html'}}Basic Information{{/t}}</div>
    <table style="width: 100%;">
      <tr>
        <td style="width: 50%;vertical-align: top;">
          <table class="{{$t|escape:'html'}}_table">
            <tr>
              <td class="title">{{t escape='html'}}Name{{/t}}</td>
              <td><input disabled = 'disabled' id="{{$t|escape:'html'}}_name" type="text" class="{{$t|escape:'html'}}_text" value="{{if isset($payment)}}{{$payment->name|escape:'html'}}{{/if}}"></input><span class="{{$t|escape:'html'}}_eg"> {{t escape='html'}}(e.g. Paypal){{/t}}</span></td>
            </tr>
            <tr>
              <td class="title">{{t escape='html'}}Description{{/t}}</td>
              <td><textarea id="{{$t|escape:'html'}}_brief" type="text" class="{{$t|escape:'html'}}_textarea" >{{if isset($payment)}}{{$payment->intro_brief|escape:'html'}}{{/if}}</textarea></td>
            </tr>
            <tr>
              <td class="title">{{t escape='html'}}Status{{/t}}</td>
              <td class="{{$t|escape:'html'}}_status_text" style="padding-top: 5px;">
                <input id="{{$t|escape:'html'}}_available" name="{{$t|escape:'html'}}_status" type="radio" {{if isset($payment) && $payment->status == 1}}checked="checked"{{else if !isset($payment)}}checked="checked"{{/if}}></input>{{t escape='html'}}Available{{/t}}
                <input id="{{$t|escape:'html'}}_not_available" name="{{$t|escape:'html'}}_status" type="radio" {{if isset($payment) && $payment->status == 0}}checked="checked"{{/if}}></input>{{t escape='html'}}Not Available{{/t}}
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
  <div>
    <div class="{{$t|escape:'html'}}_subtitle" style="text-align: center;background-color: #eaf2f5;">
      <span class="image_button" style="width: 100px;" onclick="save_payment();">
        <table>
          <tr>
            <td><img src="image/btn/save24.png"></img></td>
            <td>{{t escape='html'}}Save{{/t}}</td>
          </tr>
        </table>
      </span>
      <span class="image_button" style="width: 100px;" onclick="history.back();">
        <table>
          <tr>
            <td><img src="image/btn/cancel24.png"></img></td>
            <td>{{t escape='html'}}Cancel{{/t}}</td>
          </tr>
        </table>
      </span>
    </div>
  </div>
  <div>
    <div class="{{$t|escape:'html'}}_subtitle">
      {{t escape='html'}}Payment Setting{{/t}} - {{$payment->name|escape:'html'}}
    </div>
    <table id="{{$t|escape:'html'}}_setting" class="{{$t|escape:'html'}}_list" cellPadding="0" cellSpacing="0">
      <tr>
        <td>
          <script type="text/javascript">
          <!--
            function updateHeight() {
              iframe = document.getElementById('{{$t|escape:'html'}}_payments');
              var boh = iframe.contentDocument.body.offsetHeight;
              var bsh = iframe.contentDocument.body.scrollHeight;
              iframe.height = Math.max(Math.max(boh, bsh) + 100, 300);
//            iframe.height = Math.max(boh + 100, 300);
            }
          // -->
        </script>
        <iframe id="{{$t|escape:'html'}}_payments" onload="Javascript:updateHeight();" scrolling="no" width="100%" frameborder="0"  marginwidth="0" marginheight="0" src="payment.php?pay_f={{$payment->folder|escape:'html'}}&pay_s=admin&pay_pid={{$payment->id|escape:'html'}}"></iframe>
        </td>
      </tr>
    </table>
    <div class="{{$t|escape:'html'}}_subtitle" style="text-align: center;background-color: #eaf2f5;"></div>
  </div>
</div>

<script src="jsrequest.php?script={{$t|escape:'html'}}" type="text/javascript"></script>
<script type="text/javascript">
  <!--
    if (document.addEventListener) {
      document.addEventListener('DOMContentLoaded', init, false);
    }
    window.onload = init;
    
    var _id = {{if isset($payment)}}'{{$payment->id|escape:'javascript'}}'{{else}}0{{/if}};
    var _track = {{if $track_id != NULL}}'{{$track_id|escape:'javascript'}}'{{else}}MiscUtils.unique(){{/if}};
    
    function init() {
      if (!document.getElementById || !document.createElement || !arguments || arguments.callee._loaded) {
        return;
      }
      arguments.callee._loaded = true;
    }
    
    function save_payment() {
      var payment = {
        track_id: '{{$track_id|escape:'javascript'}}',
        //name: document.getElementById('{{$t|escape:'javascript'}}_name').value,
        status: document.getElementById('{{$t|escape:'javascript'}}_available').checked ? 1 : 0,
        intro_brief: document.getElementById('{{$t|escape:'javascript'}}_brief').value,
        is_custom: 1,
        order: Math.random()
      };
      if (_id != 0) {
        payment.id = _id;
        payment.order = '{{if isset($payment)}}{{$payment->order|escape:'javascript'}}{{/if}}';
        payment.is_custom = '{{if isset($payment)}}{{$payment->is_custom|escape:'javascript'}}{{else}}1{{/if}}'
        new RequestUtils()._custom('update_payment', JSON.stringify({ p: payment }), function(result, params) {
          location.href = 'admin.php?path=ecommerce&t=payments';
        }, {
          php: 'ecommerce/custom.php',
          pos : DOMUtils.findPos(this)
        });
      } else {
        new RequestUtils()._custom('payment', JSON.stringify(payment), function(result, params) {
          location.href = 'admin.php?path=ecommerce&t=payments';
        }, {
          php: 'ecommerce/custom.php',
          pos : DOMUtils.findPos(this)
        });
      }
    }
  // -->
</script>